<template>
    <el-dialog
        title="购买记录"
        :visible.sync="purchaseStatus"
        class='purchase'
        width='60%'
        :close-on-click-modal='false'
        :before-close="handlePurchaseClose">
        <el-table
            :data="tableData"
            border
            style="width: 100%">
                <el-table-column
                    prop="orderId"
                    label="id"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="userName"
                    label="姓名">
                </el-table-column>
                <el-table-column
                    width="90"
                    label="头像">
                <template slot-scope="scope">
                    <div class='imgBox'>
                        <img :src="scope.row.userAvatar ? scope.row.userAvatar : defaultImg" alt="">
                    </div>
                </template>
                </el-table-column>
                <el-table-column
                prop="number"
                label="购买份数">
                </el-table-column>
                <el-table-column
                prop="price"
                label="单价">
                     <template slot-scope="scope">
                        <span>{{getShowDeciemal(scope.row.priceOfUnit)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sumPrice"
                    label="订单总价">
                    <template slot-scope="scope">
                        <span>{{getShowDeciemal(scope.row.priceOfUnit*scope.row.number)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="payment"
                    label="支付方式">
                     <template slot-scope="scope">
                        <span>{{getPayStatus(scope.row)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="购买时间">
                <!-- {{ scope.row.time | parseTime('{y}-{m}-{d} {h}:{i}') }} -->
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
                    </template>
                </el-table-column>
        </el-table>
        <div class='pagination'>
            <el-pagination
                class="pagination"
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>
        </div>
    </el-dialog>
</template>

<script>
import { ajax } from '@/api';
import { parseTime } from '@/utils';
import numberFormat from '@/api/numberFormat';
import utils from '@/utils'
export default {
    name:'purchase',
    data(){
        return {
            defaultImg:'http://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png',
            total:0,
            purchaseStatus:false,
            tableData:[],
            params:{
                orderType:'',
                payType:'',
                unionId:'',
                startTime:'',
                endTime:'',
                orderNumber:'',
                keyword:'',
                start:0,
                limit:10,
                token:''
            }
        }
    },
    methods:{
        getShowDeciemal(money){
            return numberFormat.showDecimal(money);
        },
        getPayStatus(data){
            return data.payType.text;
        },
        openPurchaseStatus(id,token){
            this.params.unionId = id;
            this.params.token = token;
            if(this.params.token){
                this.getData();
            }
        },
        //购买记录
        getData(){
            ajax('ordersForManager',this.params).then((res) => {
                console.log(res);
                if(res.data.status){
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                    this.purchaseStatus = true;
                }
            });
        },
        handleCurrentChange(val){
            this.params.start = (val - 1) * this.params.limit;
            this.getData();
        },
        handlePurchaseClose(done){
            done();
            this.tableData = [];
            this.total = 0;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>


<style lang="less" scoped>
.purchase{
    .imgBox{
        width: 50px;
        height: 50px;
        margin: 0 auto;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50px;
        }
    }

    .pagination{
        text-align: right;
        margin: 1rem 0;
    }
}
</style>
